<html>
<head>
  <script src="../OLLoader.js"></script>
  <script type="text/javascript">

    var log, buttonClick, events, element, button;
    function init() {
        element = document.getElementById("map");
        button = document.getElementById("button");
    }
    function trigger(evt) {
        OpenLayers.Util.applyDefaults(evt, {
            button: 1,
            target: button
        });
        events.handleBrowserEvent(evt);
    }
    function logEvent(evt) {
        log.push(evt);
    }
   
    function test_ButtonClick(t) {
        t.plan(1);
        events = new OpenLayers.Events({}, element);
        buttonClick = new OpenLayers.Events.buttonclick(events);
        t.ok(buttonClick.target === events, "target set from constructor arg");
        buttonClick.destroy();
        events.destroy();
    }

    function test_getPressedButton(t) {
        t.plan(4);

        // set up

        events = new OpenLayers.Events({}, element);
        buttonClick = new OpenLayers.Events.buttonclick(events);

        var button = document.createElement('button'),
            span1 = document.createElement('span'),
            span2 = document.createElement('span'),
            span3 = document.createElement('span');
        button.className = 'olButton';
        button.appendChild(span1);
        span1.appendChild(span2);
        span2.appendChild(span3);

        t.ok(buttonClick.getPressedButton(button) === button,
             'getPressedButton returns button when element is button');
        t.ok(buttonClick.getPressedButton(span1) === button,
             'getPressedButton returns button when element is button descendant level 1');
        t.ok(buttonClick.getPressedButton(span2) === button,
             'getPressedButton returns button when element is button descendant level 2');
        t.eq(buttonClick.getPressedButton(span3), undefined,
             'getPressedButton returns undefined when element is button descendant level 3');

        // test


        // tear down

        buttonClick.destroy();
        events.destroy();
    }
    
    function test_ButtonClick_buttonClick(t) {
        t.plan(27);
        events = new OpenLayers.Events({}, element);
        events.on({
            "buttonclick": logEvent,
            "mousedown": logEvent,
            "mouseup": logEvent,
            "click": logEvent,
            "dblclick": logEvent,
            "touchstart": logEvent,
            "touchend": logEvent,
            "keydown": logEvent
        });
        buttonClick = events.extensions["buttonclick"];
        
        // a complete click
        log = [];
        trigger({type: "mousedown"});
        trigger({type: "mouseup"});
        t.eq(log.length, 1, "one event fired for mousedown-mouseup");
        t.eq(log[0].type, "buttonclick", "buttonclick event fired");
        
        // a complete tap
        log = [];
        trigger({type: "touchstart"});
        trigger({type: "touchend"});
        t.eq(log.length, 1, "one event fired for touchstart-touchend");
        t.eq(log[0].type, "buttonclick", "buttonclick event fired");
        
        // mouse sequence started on button
        log = [];
        trigger({type: "mousedown"});
        trigger({type: "mouseup", target: element});
        t.eq(log.length, 1, "one event fired for mousedown-(leave)-mouseup");
        t.eq(log[0].type, "mouseup", "mouseup event goes through when sequence not finished on button");

        // touch sequence started on button
        log = [];
        trigger({type: "touchstart"});
        trigger({type: "touchmove"});
        trigger({type: "touchend"});
        t.eq(log.length, 1, "one event fired for touchstart-(leave)-touchend");
        t.eq(log[0].type, "touchend", "touchend event goes through when sequence not finished on button");

        // mouse sequence finished on button
        log = [];
        trigger({type: "mousedown", target: element});
        trigger({type: "mouseup"});
        t.eq(log.length, 2, "two event fired for mousedown-(enter)-mouseup");
        t.eq(log[0].type, "mousedown", "mousedown unrelated to button goes through");
        t.eq(log[1].type, "mouseup", "mouseup goes through when sequence started outside button");

        // touch sequence finished on button
        log = [];
        trigger({type: "touchstart", target: element});
        trigger({type: "touchend"});
        t.eq(log.length, 2, "two event fired for touchstart-(enter)-touchend");
        t.eq(log[0].type, "touchstart", "touchstart unrelated to button goes through");
        t.eq(log[1].type, "touchend", "touchend goes through when sequence started outside button");
        
        // dblclick
        log = [];
        trigger({type: "mousedown"});
        trigger({type: "mouseup"});
        trigger({type: "click"});
        trigger({type: "mousedown"});
        trigger({type: "mouseup"});
        trigger({type: "click"});
        trigger({type: "dblclick"});
        t.eq(log.length, 2, "two events fired for doubleclick");
        t.eq(log[0].type, "buttonclick", "buttonclick for 1st click");
        t.eq(log[1].type, "buttonclick", "buttonclick for 2nd click");
        
        // dblclick - IE
        log = [];
        trigger({type: "mousedown"});
        trigger({type: "mouseup"});
        trigger({type: "mouseup"});
        trigger({type: "dblclick"});
        t.eq(log.length, 2, "two events fired for dblclick in IE");
        t.eq(log[0].type, "buttonclick", "buttonclick for 1st click in IE");
        t.eq(log[1].type, "buttonclick", "buttonclick for 2nd click IE");

        // rightclick
        log = [];
        trigger({type: "mousedown", button: 2});
        trigger({type: "mouseup", button: 2});
        t.eq(log.length, 2, "two events fired for rightclick");
        t.eq(log[0].type, "mousedown", "mousedown from rightclick goes through");
        t.eq(log[1].type, "mouseup", "mouseup from rightclick goes through");

        // keydown RETURN
        log = [];
        trigger({type: "keydown", keyCode: OpenLayers.Event.KEY_RETURN});
        trigger({type: "click"});
        t.eq(log.length, 1, "one event fired for RETURN keydown");
        t.eq(log[0].type, "buttonclick", "buttonclick for RETURN keydown");

        // keydown SPACE
        log = [];
        trigger({type: "keydown", keyCode: OpenLayers.Event.KEY_SPACE});
        trigger({type: "click"});
        t.eq(log.length, 1, "one event fired for SPACE keydown");
        t.eq(log[0].type, "buttonclick", "buttonclick for SPACE keydown");
    }
  </script>
</head>
<body onload="init()">
    <div id="map" style="width: 600px; height: 300px;">
        <div id="button" class="olButton">
            <img class="olAlphaImg">
        </div>
    </div>
</body>
</html>
